<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title></title>
		<style>
			#box {
				text-align: center;
				width: 400px;
				height: 100px;
				border: 2px solid lawngreen;
				margin: 0px auto;
				border-radius: 80px;
				font-size: 25px;
				text-shadow: 0px 0px 4px blue;
				background: radial-gradient(circle,blue, yellowgreen);
			}
			
			#box1{
				text-align: center;
				width: 150px;
				height: 150px;
				border: 2px solid black;
				margin: 20px auto;
				font-size: 25px;
				text-shadow:0 0 3px bisque;
				background: repeating-radial-gradient(circle , #fff 0%,#fff 10%,#000 10%,#000 20%);


			}
		</style>
	</head>

	<body>
		<div id="box">
			<h4>边框样式练习案例</h4>
		</div>
		
		<div id="box1">
			<h6>径向渐变样式</h6>
		</div>
	</body>

</html>
<!--
	分别设置四个角的圆角
	border-top-left-radius
	border-top-right-radius
	border-bottom-left-radius
	border-bottom-right-radius
	
	例：
		border-radius:40px;
		border-radius: 10%;
		border-top-left-radius: 10%;
		border-top-right-radius: 10%;
		border-bottom-left-radius: 10%;
		border-bottom-right-radius: 10%;
	小结：宽高同等情况下，圆角设置为50%，网页显示为正圆，否则为椭圆,
		将%换成px，能让边框设置成胶囊形状
	
	
	
	
	cursor:pointer;====>手指形状的光标
	display: inline-block;=====>将对象呈递为内联对象，但是对象的内容作为块对象呈递
	
	text-shadow: 水平  垂直  模糊  颜色;   
		水平：正值向右移动，负值向左移动
		垂直：正值向下移动，负值向上移动
		模糊：数值越高，投影越模糊
	
	背景色渐变
		background:linear-gradient( 线性渐变的方向 , 渐变颜色1 , 渐变颜色2 ... 渐变颜色n )	
		可以添加的方向有：
			to top(从下到上),
			to bottom(从上到下),
			to left,to right, 
			left top(从右下到左上),
			right top,left bottom , right bottom
		浏览器
			/* Safari 5.1 - 6.0 */
			background: -webkit-linear-gradient(top,#ccc,#fff);
			/* Opera 11.6 - 12.0 */
			background: -o-linear-gradient(top,#ccc,#fff);
			/* Firefox 3.6 - 15 */
			background: -moz-linear-gradient(top,#ccc,#fff);
			/* 标准的语法 */
			background: linear-gradient(to top,#ccc,#fff); 
		径向渐变:
		background:radial-gradient( 正圆或者椭圆 , 渐变颜色1 , 渐变颜色2 ... 渐变颜色n )
		浏览器：
			/* Safari 5.1 - 6.0 */
			background: -webkit-radial-gradient(circle, red, yellow, green);
			/* Opera 11.6 - 12.0 */
			background: -o-radial-gradient(circle, red, yellow, green);
			/* Firefox 3.6 - 15 */
			background: -moz-radial-gradient(circle, red, yellow, green);
			/* 标准的语法 */
			background: radial-gradient(circle, red, yellow, green);
		模仿枪靶的径向渐变
			background: repeating-radial-gradient(circle , #fff 0%,#fff 10%,#000 10%,#000 20%);
			语法：
			background:repeating-radial-gradient( 正圆或者椭圆 , 渐变颜色1 位置1 , 渐变颜色2 位置2 ... 渐变颜色n 位置n );





-->